import E from 'wangeditor'

const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

class SourceCodeEditor extends BtnMenu {
  constructor(editor) {
    const $elem = E.$(
      `<div class="w-e-menu" data-title="源码编辑模式">
          <span>源码</span>
      </div>`
    )
    super($elem, editor)

    this.editor = editor
    this.isSourceMode = false
    this.originalContent = ''
  }

  // 菜单点击事件
  clickHandler(e) {
    this.toggleSourceMode(e.srcElement)
  }

  // 菜单是否被激活（如果不需要，这个函数可以空着）
  tryChangeActive() {}

  // 切换源代码模式
  toggleSourceMode(el) {
    console.log(el)
    if (this.isSourceMode) {
      this.exitSourceMode()
      el.className = 'w-e-menu'
    } else {
      this.enterSourceMode()
      el.className = 'w-e-menu hig-source-mode-active'
    }
  }

  // 进入源代码模式
  enterSourceMode() {
    this.isSourceMode = true
    this.originalContent = this.editor.txt.html()
    
    // 创建源代码编辑区域
    const container = this.editor.$textContainerElem
    const textElem = this.editor.$textElem
    textElem.hide()
    
    // 创建文本区域
    this.textarea = document.createElement('textarea')
    this.textarea.style.width = '100%'
    this.textarea.style.height = '100%'
    this.textarea.style.fontFamily = 'monospace'
    this.textarea.style.padding = '10px'
    this.textarea.style.border = '0px'
    this.textarea.value = this.formatHtml(this.originalContent)
    container.elems[0].append(this.textarea)

    // 添加确认和取消按钮
    // this.addControlButtons()
  }

  // 退出源代码模式
  exitSourceMode() {
    this.isSourceMode = false

    const newHtml = this.textarea.value
    this.editor.txt.html(newHtml)
    
    // 移除文本区域和按钮
    if (this.textarea) {
      this.textarea.remove()
    }
    if (this.buttonContainer) {
      this.buttonContainer.remove()
    }
    
    // 显示原始编辑器
    this.editor.$textElem.show()
  }

  // 添加控制按钮
  addControlButtons() {
    this.buttonContainer = document.createElement('div')
    this.buttonContainer.style.marginTop = '10px'
    this.buttonContainer.style.textAlign = 'center'

    const confirmBtn = document.createElement('a')
    confirmBtn.textContent = '确认'
    confirmBtn.style.marginRight = '10px'
    confirmBtn.onclick = () => this.confirmChanges()

    const cancelBtn = document.createElement('a')
    cancelBtn.textContent = '取消'
    cancelBtn.onclick = () => this.cancelChanges()

    this.buttonContainer.append(confirmBtn, cancelBtn)
    const container = this.editor.$textContainerElem
    container.elems[0].append(this.buttonContainer)
  }

  // 确认更改
  confirmChanges() {
    const newHtml = this.textarea.value
    this.editor.txt.html(newHtml)
    this.exitSourceMode()
  }

  // 取消更改
  cancelChanges() {
    this.editor.txt.html(this.originalContent)
    this.exitSourceMode()
  }

  // 格式化HTML代码
  formatHtml(html) {
    // 简单的HTML格式化
    return html
      // .replace(/></g, '>\n<')
      .replace(/\s+/g, ' ') //全局替换连续多个空白字符（包括空格、制表符、换行符等）为一个空格
      .trim()
  }
}

// 菜单 key ，各个菜单不能重复
const menuKey = 'viewSourceKey'
E.registerMenu(menuKey, SourceCodeEditor)

export default E